<template>
  <div class="app-container">
    <div class="table-box">
      <!-- 按钮功能区 开始 -->
      <el-row :gutter="10" class="btn-box">
        <el-col
          :xs="24"
          :sm="24"
          :md="24"
          :lg="24"
          :xl="24"
          class="btnfunction-section-col"
        >
          <el-button type="primary" icon="el-icon-edit" @click="handleAdd()">{{
            $t('common.create')
          }}</el-button>
          <el-button-group>
            <el-button
              type="primary"
              icon="el-icon-plus"
              :title="$t('common.toggle_on')"
              @click="handleArrowDown()"
            />
            <el-button
              type="primary"
              icon="el-icon-minus"
              :title="$t('common.toggle_off')"
              @click="handleArrowUp()"
            />
          </el-button-group>
          <el-button type="primary" @click="handleUpdateSort()">{{
            $t('common.updateSort')
          }}</el-button>
        </el-col>
      </el-row>
      <!-- 按钮功能区 结束 -->

      <!-- Note that row-key is necessary to get a correct row order.   table当前行高亮属性highlight-current-row-->
      <el-table
        ref="treeTable"
        v-loading="listLoading"
        :data="list"
        row-key="id"
        border
        fit
        highlight-current-row
        style="width: 100%"
        :indent="16"
      >
        <el-table-column align="center" label="ID" type="" width="110">
          <template slot-scope="{ row }">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>

        <el-table-column
          align="left"
          :label="$t('table.menu_name')"
          class-name="menuIcon"
          min-width="150px"
        >
          <template slot-scope="{ row }">
            <span>{{ row.label }}</span>
          </template>
        </el-table-column>

        <el-table-column width="250" :label="$t('common.sort')" align="center">
          <template slot-scope="{ row }">
            <el-input-number v-model="row.sort" controls-position="right" :min="1" />
          </template>
        </el-table-column>

        <el-table-column class-name="status-col" :label="$t('common.status')" width="110">
          <template slot-scope="{ row }">
            <el-tag :type="row.status | statusFilter" @click="handleModifyStatus(row)">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column class-name="status-col" :label="$t('common.created_at')" width="200">
          <template slot-scope="{ row }">
            <span>{{ row.created_at }}</span>
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('common.operation')"
          align="center"
          class-name="small-padding fixed-width"
          width="200px"
          fixed="right"
        >
          <template slot-scope="{ row, $index }">
            <span
              class="link-type"
              :title="$t('common.edit')"
              @click="handleEdit(row)"
            >
              <i class="el-icon-edit" />
            </span>&nbsp;
            <span
              v-if="row.status != 'deleted'"
              class="link-type"
              :title="$t('common.delete')"
              @click="handleDelete(row, $index)"
            >
              <i class="el-icon-delete" />
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
// import { fetchList } from '@/api/article'
import i18n from '@/lang'
import { arrChildrenFlatten } from '@/utils/object'

export default {
  name: 'TreeTable',
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10
      },
      sortable: [],
      oldList: [],
      newList: [],
      rules: {
        type: [
          { required: true, message: 'type is required', trigger: 'change' }
        ],
        timestamp: [
          {
            type: 'date',
            required: true,
            message: 'timestamp is required',
            trigger: 'change'
          }
        ],
        title: [
          { required: true, message: 'title is required', trigger: 'blur' }
        ]
      },
      statusOptions: ['published', 'draft', 'deleted'],
      pvData: [],
      // 权限菜单路由数据模拟
      routesDemoData: [
        {
          id: 1,
          parent_id: 0,
          label: '一级 1',
          status: 'published',
          level: 1,
          created_at: '2021-5-5 10:20:00',
          sort: 1,
          children: [
            {
              id: 4,
              parent_id: 1,
              label: '二级 1-1',
              status: 'published',
              level: 2,
              created_at: '2021-5-5 10:20:00',
              sort: 1,
              children: [
                {
                  id: 9,
                  parent_id: 4,
                  label: '三级 1-1-1',
                  status: 'published',
                  level: 3,
                  created_at: '2021-5-5 10:20:00',
                  sort: 1
                },
                {
                  id: 10,
                  parent_id: 4,
                  label: '三级 1-1-2',
                  status: 'draft',
                  level: 3,
                  created_at: '2021-5-5 10:20:00',
                  sort: 2
                }
              ]
            }
          ]
        },
        {
          id: 2,
          parent_id: 0,
          label: '一级 2',
          status: 'published',
          level: 1,
          created_at: '2021-5-5 10:20:00',
          sort: 2,
          children: [
            {
              id: 5,
              parent_id: 2,
              label: '二级 2-1',
              status: 'published',
              level: 2,
              created_at: '2021-5-5 10:20:00',
              sort: 1
            },
            {
              id: 6,
              parent_id: 2,
              label: '二级 2-2',
              status: 'published',
              level: 2,
              created_at: '2021-5-5 10:20:00',
              sort: 2
            }
          ]
        },
        {
          id: 3,
          label: '一级 3',
          parent_id: 0,
          status: 'published',
          level: 1,
          created_at: '2021-5-5 10:20:00',
          sort: 3,
          children: [
            {
              id: 7,
              parent_id: 3,
              label: '二级 3-1',
              status: 'published',
              level: 2,
              created_at: '2021-5-5 10:20:00',
              sort: 1
            },
            {
              id: 8,
              parent_id: 3,
              label: '二级 3-2',
              status: 'published',
              level: 2,
              created_at: '2021-5-5 10:20:00',
              sort: 2
            }
          ]
        },
        {
          id: 100,
          label: '一级 3',
          parent_id: 0,
          status: 'published',
          level: 1,
          created_at: '2021-5-5 10:20:00',
          sort: 100
        }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.listLoading = true
      // 模拟请求
      // const { data } = await fetchList(this.listQuery)
      // this.list = data.items
      // this.total = data.total
      this.list = this.routesDemoData
      this.total = this.routesDemoData.length
      this.listLoading = false
    },
    handleDelete(row, index) {
      this.$confirm(i18n.t('common.delete_confirm_tips'), i18n.t('common.warm_tips'), {
        confirmButtonText: i18n.t('common.confirm'),
        cancelButtonText: i18n.t('common.cancel'),
        type: 'warning'
      }).then(() => {
        // 这里需请求删除接口...
        this.$message.success(i18n.t('common.deleted'))
        this.list.splice(index, 1)
      }).catch(() => {
        this.$message.info(i18n.t('common.canceled'))
      })
    },
    handleAdd() {
      this.$router.push({ name: 'FormCreate' })
    },
    // 更新排序
    handleUpdateSort() {
      // 这里需对接排序接口
      const params = arrChildrenFlatten(this.list).map((e) => {
        return { id: e.id, sort: e.sort }
      })
      console.log(params)
      this.$message.success(i18n.t('common.operation_successful'))
    },
    handleEdit(row) {
      this.$router.push({ name: 'FormEdit', params: { id: row.id }})
    },
    handleModifyStatus(row) {
      // 请求接口
      this.$message.success(i18n.t('common.operation_successful'))
      row.status = row.status === 'draft' ? 'published' : 'draft'
    },
    // 展开、收起数据处理
    downUpData(data, isExpand) {
      data.forEach((i) => {
        this.$refs.treeTable.toggleRowExpansion(i, isExpand)
        if (i.children) {
          this.downUpData(i.children, isExpand)
        }
      })
    },
    handleArrowDown() {
      // 全部展开
      this.downUpData(this.list, true)
    },
    handleArrowUp() {
      // 全部收起
      this.downUpData(this.list, false)
    }
  }
}
</script>

<style scoped>
</style>
